<!doctype html>
<html lang="en-US" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Phoenix</title>
    <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicons/favicon-16x16.png">
    <link rel="shortcut icon" type="image/x-icon" href="static/img/favicons/favicon.ico">
    <link rel="manifest" href="static/img/favicons/manifest.json">
    <meta name="msapplication-TileImage" content="../static/img/favicons/mstile-150x150.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="preconnect" href="https://fonts.gstatic.com/">
    <link href="static/css/css2.css" rel="stylesheet">
    <link href="static/css/css21.css" rel="stylesheet">
    <link href="static/css/phoenix.min.css" rel="stylesheet" id="style-default">
    <link href="#" rel="stylesheet" id="user-style-default">
    <style>
      body {
        opacity: 0;
      }
    </style>
  </head>

  <body>
    <main class="main" id="top">
      <div class="container-fluid px-0">
        <div class="container">
          <div class="row flex-center min-vh-100 py-5">
            <div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-3"><a class="d-flex flex-center text-decoration-none mb-4" href="index.html">
                <div class="d-flex align-items-center"><img src="static/picture/logo.png" alt="phoenix" width="58"></div>
              </a>
              <div class="text-center mb-7">
                <h3>Sign In</h3>
                <p class="text-700">Get access to your account</p>
              </div><button class="btn btn-phoenix-secondary w-100 mb-3"><span class="fab fa-google text-google me-2 fs--1"></span>Sign in with google</button><button class="btn btn-phoenix-secondary w-100"><span class="fab fa-facebook text-facebook me-2 fs--1"></span>Sign in with facebook</button>
              <div class="position-relative mt-4">
                <hr class="bg-200">
                <div class="divider-content-center">or use email</div>
              </div>
              <div class="mb-3 text-start"><label class="form-label" for="email">Email address</label>
                <div class="form-icon-container"><input class="form-control form-icon-input" id="email" type="email" placeholder="name@example.com"><span class="fas fa-user text-900 fs--1 form-icon"></span></div>
              </div>
              <div class="mb-3 text-start"><label class="form-label" for="password">Password</label>
                <div class="form-icon-container"><input class="form-control form-icon-input" type="password" placeholder="Password"><span class="fas fa-user text-900 fs--1 form-icon"></span></div>
              </div>
              <div class="row flex-between-center mb-7">
                <div class="col-auto">
                  <div class="form-check mb-0"><input class="form-check-input" id="basic-checkbox" type="checkbox" checked="checked"><label class="form-check-label mb-0" for="basic-checkbox">Remember me</label></div>
                </div>
                <div class="col-auto"><a class="fs--1 fw-semi-bold" href="#!">Forgot Password?</a></div>
              </div><button class="btn btn-primary w-100 mb-3">Sign In</button>
              <div class="text-center"><a class="fs--1 fw-bold" href="#!">Create an account</a></div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="static/js/phoenix.js"></script>
  </body>

</html>